<template>
    <van-form @submit="submitForm" @failed="onFailed" ref="ruleFormRef" :model="form">
        <van-cell-group>
            <van-field
            v-model="form.username"
            label="账号"
            placeholder="请输入用户名"
            name="username"
            :rules="usernameRules">
        </van-field>
        </van-cell-group>
        <van-cell-group>
            <van-field
            v-model="form.password"
            label="密码"
            placeholder="请输入密码"
            name="password"
            clearable
            type="password"
            :rules="passwordRules">
        </van-field>
        </van-cell-group>
        <van-cell-group>
            <van-button block round type="primary" native-type="submit">登录</van-button>
        </van-cell-group>
    </van-form>
</template>


<script setup>
import { ref, reactive } from 'vue'
import {login,getUser} from '../api'
import useToken from '../stores/token';
import useUser from '../stores/user';
import { useRouter } from 'vue-router';

const {updateToken} = useToken()
const  {updateUser} = useUser()
const router = useRouter()
const form = reactive({
    username:'demo1',
    password:'123456'
})
const ruleFormRef = ref()

const usernameRules = ref([
    { required: true,message:'用户名不存在'},
    { pattern: /^\w{3,16}$/, message:'用户名长度为3-16个字符'}
])

const passwordRules = ref([
    {required: true,message:'密码不能为空'},
    {pattern: /^w{6,16}$/, message:'密码长度为6-24个字符'}
])


const submitForm = async values => {
    const data = await login(values)
    if(data){
        updateToken(data.token)
        const user = await getUser()
        updateUser({
            isLogin:true,
            username:user.username,
            avatar:user.avatar
        })
        router.push({name:'user'})
    }
    
}
const onFailed = errorInfo => {
    console.log('failed',errorInfo)
}
</script>

<style lang="less" scoped>

</style>